<template>
  <div class="bc-form-list">
    <div class="bc-form-th">
      <div v-for="(t, tid) in fields" :key="`t-${tid}`" :style="{ width: itemWidth(t, fields) }">
        <span class="rules" v-show="t.rules">*</span>
        {{ t.label }}
      </div>
      <div class="del-icon" v-if="props.del"></div>
    </div>
    <div class="bc-form-tb" v-for="(item, index) in formList" :key="index">
      <div v-for="(sub, sid) in fields" :key="`${index}-${sid}`" :style="{ width: itemWidth(sub, fields) }">
        <el-form-item :prop="`${props.keyName}[${index}][${sub.prop}]`" :rules="sub.rules">
          <bc-form-number
            v-if="sub.type === 'number'"
            v-model="formList[index][sub.prop]"
            :config="sub"
            :mode="props.mode"
          />
          <bc-form-modal
            v-else-if="sub.type === 'modal'"
            v-model="formList[index][sub.prop]"
            v-model:text="formList[index][sub.textProp || sub.prop]"
            :config="sub"
            :mode="props.mode"
            :form="formList[index]"
          />
          <bc-form-select
            v-else-if="sub.type === 'select'"
            v-model="formList[index][sub.prop]"
            :config="sub"
            :mode="props.mode"
            :form="formList[index]"
          />
          <bc-form-input v-else v-model="formList[index][sub.prop]" :config="sub" :mode="props.mode" />
        </el-form-item>
      </div>
      <div class="del-icon" v-if="props.del">
        <el-icon size="20" @click="handleDel(index)"><Delete /></el-icon>
      </div>
    </div>
    <div v-if="props.add" class="bc-form-add">
      <el-button :icon="Plus" style="width: 100%" @click="onAdd">添加行</el-button>
    </div>
  </div>
</template>

<script setup>
import { cloneDeep } from 'lodash'
import BcFormInput from './components/BcFormInput.vue'
import BcFormNumber from './components/BcFormNumber.vue'
import { Plus, Delete } from '@element-plus/icons-vue'

const props = defineProps({
  fields: {
    type: Array,
    default: () => [],
  },
  keyName: {
    type: String,
    default: 'fieldList',
  },
  add: {
    type: Boolean,
    default: true,
  },
  del: {
    type: Boolean,
    default: true,
  },
  border: {
    type: Boolean,
    default: true,
  },
  mode: {
    type: String,
    default: 'add',
  },
})
const emits = defineEmits(['change'])

const itemWidth = (item) => {
  if (item.width) {
    return item.width
  } else {
    const widthArr = props.fields.filter((i) => i.width).map((i) => i.width)
    if (widthArr.length > 0) {
      let sum = widthArr.reduce((acc, curr) => acc + curr, 0)
      return `calc((100% - ${props.del ? '30px' : 0} - ${sum}) / ${props.fields.length - widthArr.length})`
    } else {
      return `calc((100% - ${props.del ? '30px' : 0}) / ${props.fields.length})`
    }
  }
}

const formList = ref([])
const set = (info) => {
  formList.value = cloneDeep([...info])
}
const onAdd = () => {
  formList.value.push({})
}
const handleDel = (index) => {
  formList.value.splice(index, 1)
}

watch(
  () => formList,
  (newVal, oldVal) => {
    emits('change', newVal, oldVal)
  },
  { deep: true }
)
defineExpose({
  set,
  // submit,
  // reset,
})
</script>

<style lang="scss" scoped>
.bc-form-list {
  .bc-form-th {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    font-size: var(--el-form-label-font-size);
    color: var(--el-text-color-regular);
    .rules {
      color: #f56c6c;
      margin-right: 4px;
    }
  }
  .bc-form-tb {
    display: flex;
    gap: 12px;
  }
  .del-icon {
    width: 30px;
    margin-top: 5px;
    text-align: right;
  }
}
</style>
